<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>角色管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <el-table :data="rolesList" border stripe>
        <el-table-column type="expand" label="">
            <template slot-scope="scope">
                <el-row :class="['bdbottom',index1===0?'bdtop':'']" v-for="(item1,index1) in scope.row.children" :key="item1.id" >
                    <!--渲染一级权限-->
                    <el-col :span="5">
                        <el-tag closable @close="handleClose(scope.row,item1.id)">{{item1.authName}}</el-tag>
                        <i class="el-icon-cart-right"></i>
                    </el-col>
                    <!--渲染二级权限-->
                    <el-col :span="19">
                        <el-row v-for="(item2,index2) in item1.children" :key=item2.id>
                            <el-col :span="6">
                                <el-tag  closable type="success" @close="handleClose(scope.row,item2.id)">{{item2.authName}}</el-tag>
                            </el-col>
                            <el-col :span="18">
                                <el-tag closable @close="handleClose(scope.row,item3.id)" type="warning" v-for="(item3 ,index3) in item2.children" :key="item3.id">{{item3.authName}}</el-tag>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>

                <!-- <li v-for="(value,index) in scope.row.children">
                    {{index +"=="+ value.authName}}
                    <li v-for="(valueNext,indexNext) in value.children">
                        >>>{{valueNext.authName}}
                        <li v-for="(valueSecond ,indexSecond ) in valueNext">
                            >>>>>>{{valueSecond.authName}}
                        </li>
                    </li>
                </li> -->
                <!-- <pre>{{scope.row}}</pre> -->
            </template>
        </el-table-column>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column label="角色名称" prop="roleName"></el-table-column>
        <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
        <el-table-column label="操作" prop="children">
          <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" round>修改</el-button>
                <el-button type="warning" icon="el-icon-star-off" round>分配</el-button>
                <el-button type="danger" icon="el-icon-delete" round>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
data(){
    return{
        rolesList:[]
    }
},
methods:{
    async getRoles(){
        let {data:res}=await this.$http.get("roles")
        console.log(res);
        if(res.meta.status!==200) return this.$message.error("获取角色列表失败，请检查网络！")
        this.rolesList=res.data
        return this.$message.info("获取角色列表")
    },
    async handleClose(row,id){
        //提示是否删除
       const confirmResult = await this.$confirm('此操作将删除该标签, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch((err) => {err});
        if(confirmResult!=="confirm"){
            return this.$message.info("取消删除")
        } 
        const {data:res}= await this.$http.delete(`roles/${row.id}/rights/${id}`)
        if (res.meta.status!==200) return this.$message.error("删除失败！")
         
         //将新返回的数据赋值
        // this.getRoles()
        row.children=res.data
        

        //.then(() => {
        //   const result= this.$http.delete(`roles/${row.id}/rights/${id}`)
        //   console.log(result);
        // })
        //this.$http.delete(`roles/${row.id}/rights/${id}`)
        // //this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
       // console.log(id);
    }
},
created(){
    this.getRoles()
}
}
</script>

<style lang="less" scoped>
.el-tag {
  margin: 7px;
}
.bdtop {
  border-top: 1px solid #eee;
}
.bdbottom {
  border-bottom: 1px solid #eee;
}
.vcenter {
  display: flex;
  align-items: center;
}
</style>